import { Col, Form, Input, Modal, Radio, Row, Select } from "antd";
import type { UserInfo } from "../../apis/userinfo/type";
import { useEffect, useState } from "react";
import UploadImg from "../upload/UploadImg";

interface AddUserProps {
    onCancel: () => void,
    editUserInfo: UserInfo | undefined
}

const usertypes = [
    { value: 1, label: '业主' },
    { value: 2, label: '租户' }
]

function AddUser({ onCancel, editUserInfo }: AddUserProps) {


    const [form] = Form.useForm();

    const uploadHandle=(url:string)=>{

        form.setFieldValue("photo",url);

    }

    useEffect(() => {
        form.setFieldsValue(editUserInfo)
    }, [])

    const handleOk = () => { 

        form.submit();

    }
    const onFinish = (values: UserInfo) => { 

        console.log("表单数据",values);

       let data= {...editUserInfo,...values};

       console.log("调接口传的数据",data);




        
    }


    return (
        <Modal
            width="800px"
            title={editUserInfo?.id ? '编辑居民' : '添加居民'}
            closable={{ 'aria-label': 'Custom Close Button' }}
            open={true}
            okText="提交"
            onOk={handleOk}
            onCancel={(() => onCancel())}
        >
            <Form onFinish={onFinish} form={form} size="large" style={{ padding: '10px 50px' }}>

                <Row gutter={100}>
                    <Col span={12}>
                        <Form.Item name="photo" label="头像">
                           <UploadImg defaultImgUrl={editUserInfo?.photo} uploadHandle={uploadHandle} />
                        </Form.Item>
                        <Form.Item label="楼栋" name="buildingid" rules={[{ required: true, message: '请选择楼栋' }]}>
                            <Input></Input>
                        </Form.Item>
                        <Form.Item<UserInfo> name="houseno" label="房间">
                            <Input></Input>
                        </Form.Item>
                        <Form.Item name="name" rules={[{ required: true, message: '请选输入姓名' }]} label="姓名">
                            <Input></Input>
                        </Form.Item>
                        <Form.Item<UserInfo> name="sex" label="性别">
                            <Radio.Group
                                options={[
                                    { value: 1, label: '男' },
                                    { value: 0, label: '女' }
                                ]}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item<UserInfo> name="nation" label="民族">
                            <Input></Input>
                        </Form.Item>
                        <Form.Item<UserInfo> name="usernative" label="籍贯">
                            <Input></Input>
                        </Form.Item>
                        <Form.Item name="cardid" label="证件">
                            <Input></Input>
                        </Form.Item>
                        <Form.Item<UserInfo> name="mobile" label="电话">
                            <Input></Input>
                        </Form.Item>
                        <Form.Item<UserInfo> name="usertype" label="类型">
                            <Select options={usertypes} />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Modal>
    )
}
export default AddUser;